import { createApp } from 'vue'

import request from './utils/request'
import storage from './utils/storage'
import pinia from '@/stores/index'
import api from '@/api'
import '@/assets/style/index.scss'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 暗黑模式
import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/assets/style/change.css'
import 'animate.css'
import { ElMessage } from 'element-plus'
import App from './App.vue'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// console.log('环境变量 =>', import.meta.env)

const app = createApp(App)

// 自定义指令
app.directive('has', {
  beforeMount: (el, binding) => {
    // console.log(el, binding)
    // 获取按钮权限
    let actionList = storage.getItem('actionList')
    let value = binding.value
    // 判断列表中是否有对应的权限标识
    let hasPermission = actionList.includes(value)

    //如果用户设置没有权限，则隐藏元素
    if (!hasPermission) {
      el.style = 'display:none'
      // 使用setTimeout确保以下代码在下一个事件循环周期中运行
      setTimeout(() => {
        el.parentNode.removeChild(el)
      }, 0)
    }
  }
})

app.use(router)
app.use(pinia)
app.use(ElementPlus)

// 注册elementplus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.config.globalProperties.$request = request
app.config.globalProperties.$api = api
app.config.globalProperties.$storage = storage
app.config.globalProperties.$message = ElMessage
app.mount('#app')
